<template>
  <view class="page">
    <uni-easyinput class="ipt" prefixIcon="search" v-model="content" @confirm="getArticleList()" placeholder="搜索" @iconClick="getArticleList()"> </uni-easyinput>
    <view class="cateList align-center mt2">
      <view class="cateItem" :class="{ cateItemAct: category_id == item.id }" v-for="(item, index) in categoryList" :key="index" @click="toggleClass(item.id)">
        {{ item.name }}
      </view>
    </view>
    <view style="padding: 10px">
      <goodItem :list="articleList" v-if="articleList.length > 0"></goodItem>
    </view>

    <view v-if="articleList.length == 0" class="noneData"></view>
  </view>
</template>
<script>
import goodItem from '@/components/goodItem'

export default {
  data() {
    return {
      categoryList: [],
      content: '',
      articleList: [],
      category_id: 1,
      title: ''
    }
  },
  onLoad() {
    this.getData()
    this.getArticleList()
  },
  components: {
    goodItem
  },
  created() {},
  onShow() {},

  methods: {
    getData() {
      this.categoryList = [
        {
          name: '最新',
          id: 1
        },
        {
          name: '最热',
          id: 2
        }
      ]
    },
    toggleClass(index) {
      this.category_id = index
      this.getArticleList()
    },
    getArticleList() {
      this.articleList = []
      this.$http({
        url: 'getArticleList',
        method: 'GET',
        data: {
          content: this.content,
          type: this.category_id
        }
      }).then(res => {
        this.articleList = res.data.data.map(el => {
          let arr = el.url.split(',')
          arr.some(item => {
            if (!item.endsWith('.mp4')) {
              el.thumb_image = item
              return true
            } else {
              el.video = item
            }
          })
          return el
        })
        console.log(this.articleList)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../common/common.css';
.page {
  background-color: rgba(248, 248, 248, 1);
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: scroll;
}
.ipt {
  width: 95%;
  margin: 10px auto;
  ::v-deep .uni-easyinput__content {
    border-radius: 20px;
  }
}

.cateList {
  width: 90%;
  align-items: center;
  margin: 10px auto;
}
.cateItem {
  color: rgba(153, 153, 153, 1);
  font-size: 28rpx;
  text-align: left;
  line-height: 28rpx;
  margin-right: 10px;
}
.cateItemAct {
  position: relative; /* 允许伪元素相对于这个容器定位 */
  line-height: 40rpx;
  color: rgba(153, 153, 153, 1);
  font-size: 38rpx;
  width: auto;
  color: #111111;
  font-weight: 600;
  position: relative;
  z-index: 2;
}
.cateItemAct::after {
  content: '';
  position: absolute;
  left: 1px;
  bottom: -2px;
  width: 80%;
  height: 7px;
  background: url('../../static/img/dot.png') no-repeat center;
  background-size: 100% 100%;
  z-index: 1;
}
</style>
